<template>
  <view class="manage-container">
    <!-- 头部区域 -->
    <view class="header-box">
      <view class="back-btn" @click="goBack">
        <text class="cuIcon cuIcon-back text-white"></text>
      </view>
      <view class="header-title-wrapper">
        <text class="header-title">{{ classInfo.class_name }}</text>
      </view>
      <text class="header-subtitle">考勤管理</text>
    </view>

    <!-- 设置区域 -->
    <view class="settings-box card">
      <view class="section-title">签到方式</view>
      <radio-group class="radio-group" @change="changeCheckType">
        <label class="radio-item flex-between" v-for="item in checkTypes" :key="item.value">
          <view class="radio-content">
            <view class="icon-container" :class="'bg-' + item.iconColor">
              <text class="icon-text" :style="{ color: 'white' }">{{ item.icon }}</text>
            </view>
            <text class="radio-label">{{ item.label }}</text>
          </view>
          <radio class="custom-radio" :value="item.value" :checked="checkType === item.value" />
        </label>
      </radio-group>

      <view class="divider-line"></view>

     <view class="time-setting flex-between">
             <view class="flex-align">
				 <text class="setting-label">签到时长<text class="cuIcon cuIcon-time text-white"></text></text>
             </view>
             <view class="input-container">
               <input class="duration-input" type="number" v-model="duration" placeholder="请输入" @input="validateDuration" />
               <text class="unit">分钟</text>
             </view>
           </view>
     
           <view class="divider-line"></view>
     
           <view class="location-setting flex-between">
             <view class="flex-align">
				 <text class="setting-label">定位验证<text class="cuIcon cuIcon-location text-white"></text></text>
             </view>
             <switch class="custom-switch" :checked="enableLocation" @change="toggleLocation" color="#1890FF" />
           </view>
     
           <!-- 签到码输入框 -->
           <view class="checkin-code-container" v-if="checkType === 'code'">
             <view class="flex-between">
               <view class="flex-align">
                 <view class="icon-container bg-blue">
                   <text class="cuIcon cuIcon-key text-white"></text>
                 </view>
                 <text class="setting-label">签到码</text>
               </view>
             </view>
             <view class="input-container">
               <input class="code-input" type="number" v-model="checkinCode" placeholder="请输入8位数字" maxlength="8" @input="validateCode" />
             </view>
           </view>
         </view>
     
         <!-- 操作按钮 -->
         <view class="btn-container">
           <wButton text="发起签到" @click="startCheckin" bgColor="#1890FF" radius="40" :loading="isSubmitting" customStyle="box-shadow: 0 4px 12px rgba(24,144,255,0.4);" />
         </view>
       </view>
     </template>

<script>
import wButton from '@/components/watch-login/watch-button.vue'

export default {
  data() {
    return {
		
      checkType: 'qrcode',
      duration: 10,
      enableLocation: true,
      isSubmitting: false,
      checkinCode: '',
      checkTypes: [
        { label: '普通签到', value: 'qrcode', icon: 'Q', iconColor: 'green' },
        { label: '签到码签到', value: 'code', icon: 'C', iconColor: 'purple' }
      ],
      classInfo: {
        class_name: '默认班级'
      }
    }
  },
  components: { wButton },
  onLoad(options) {
    this.classInfo = uni.getStorageSync('currentClass') || { class_name: '23人工智能C班' }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    validateDuration() {
      if (this.duration < 1) {
        uni.showToast({
          title: '时长不能小于1分钟',
          icon: 'none'
        })
        this.duration = 1
      }
    },
    validateCode() {
      if (this.checkinCode.length > 8) {
        this.checkinCode = this.checkinCode.slice(0, 8)
        uni.showToast({
          title: '签到码最长为8位',
          icon: 'none'
        })
      }
    },
    changeCheckType(e) {
      this.checkType = e.detail.value
    },
    toggleLocation(e) {
      this.enableLocation = e.detail.value
    },
    async startCheckin() {
      if (this.checkType === 'code' && (!this.checkinCode || this.checkinCode.length !== 8)) {
        uni.showToast({
          title: '请设置8位签到码',
          icon: 'none'
        })
        return
      }

      this.isSubmitting = true
      uni.showLoading({ title: '正在发起签到...' })

      // 模拟 API 调用
      setTimeout(() => {
        uni.hideLoading()
        this.isSubmitting = false
        uni.showToast({ title: '签到已发起' })
      }, 1500)
    }
  }
}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url('./css/manage.css');
</style>